import React, { useState } from 'react'
import { Header, RouterView } from 'src/components'
import { useSelector } from 'react-redux'
import { CSSTransition, } from 'react-transition-group';
import { imgBaseUrl } from 'src/config/env'
import { Link } from 'react-router-dom'
import routerData from '../routerData';
import './index.scss'

// 商家信息
const ShopDetail = () => {
    const { shopDetail = {} } = useSelector(state => state)
    const [licenseImg, setLicenseImg] = useState()
    const [showlicenseImg, setShowlicenseImg] = useState(false)
    const showLicenseImg = (img) => {
        setLicenseImg(img)
        setShowlicenseImg(true)
    }
    return <div className="page_shop_shopdetail">
        <Header title="商家详情" goBack />
        <section className="activities_container">
            <header>活动与属性</header>
            <ul className="actibities_ul">
                {
                    shopDetail.activities.map((item) => {
                        return <li key={item.id}>
                            <span style={{ backgroundColor: "#" + item.icon_color }}>{item.icon_name}</span>
                            <span>{item.description}(APP专享)</span>
                        </li>
                    })
                }
            </ul>
            <ul className="actibities_ul">
                {
                    shopDetail.supports.map((item) => {
                        return <li key={item.id}>
                            <span style={{ backgroundColor: "#" + item.icon_color }}>{item.icon_name}</span>
                            <span>{item.description}(APP专享)</span>
                        </li>
                    })
                }
            </ul>
        </section>
        <section className="shop_status_container">
            <Link to="/shop/shopDetail/shopSafe" className="shop_status_header">
                <span className="shop_detail_title">食品监督安全公示</span>
                <div>
                    <span className="identification_detail">企业认证详情</span>
                    <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" className="description_arrow" >
                        <path d="M0 0 L8 7 L0 14" stroke="#bbb" strokeWidth="1.5" fill="none" />
                    </svg>
                </div>
            </Link>
            <section className="shop_statu_detail">
                <div>
                    {
                        shopDetail.status === 1 ?
                            <svg className="shop_status">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#res-well"></use>
                            </svg>
                            :
                            <svg className="res-well">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#res-bad"></use>
                            </svg>
                    }
                </div>
                <div className="check_date">
                    <p>
                        <span>监督检查结果：</span>
                        {
                            shopDetail.status === 1 ?
                                <span className="shop_status_well">良好</span>
                                :
                                <span className="shop_status_bad">差</span>
                        }
                    </p>
                    <p>
                        <span>检查日期：</span>
                        <span>{shopDetail.identification && shopDetail.identification.identificate_date && shopDetail.identification.identificate_date.split('T')[0]}</span>
                    </p>
                </div>
            </section>
        </section>
        <section className="shop_status_info">
            <header>商家信息</header>
            <p>{shopDetail.name}</p>
            <p>地址：{shopDetail.address}</p>
            <p>营业时间：[{shopDetail.opening_hours[0]}]</p>
            <p onClick={() => showLicenseImg(shopDetail.license.business_license_image)}>
                <span>营业执照</span>
                <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" className="description_arrow" >
                    <path d="M0 0 L8 7 L0 14" stroke="#bbb" strokeWidth="1.5" fill="none" />
                </svg></p>
            <p onClick={() => showLicenseImg(shopDetail.license.catering_service_license_image)}>
                <span>餐饮服务许可证</span>
                <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" className="description_arrow" >
                    <path d="M0 0 L8 7 L0 14" stroke="#bbb" strokeWidth="1.5" fill="none" />
                </svg>
            </p>
        </section>
        <CSSTransition
            classNames="fade"
            in={showlicenseImg}
            timeout={500}
            unmountOnExit
        >
            <section className="license_container" onClick={() => setShowlicenseImg(false)}>
                <img src={imgBaseUrl + licenseImg} alt="" />
            </section>
        </CSSTransition>
        <RouterView data={routerData} />
    </div>
}

export default ShopDetail